<template>
	<div>
		<Tabs>
			<TabPane label="自提点设置">
				<Form label-position="top" ref="form" :model="formData" :rules="formRules" @submit.native.prevent>
					<FormDescItem label="自定义名称" prop="store_name" desc="设置自提点名称，自提点名称会显示在前台">
						<Input v-model="formData.store_name"></Input>
					</FormDescItem>
					<FormDescItem label="自提点功能开关" prop="status" desc="如选择关闭，用户则无法使用自提功能">
						<RadioGroup v-model="formData.status">
							<Radio :label="1">开启</Radio>
							<Radio :label="2">关闭</Radio>
						</RadioGroup>
					</FormDescItem>
					<FormDescItem label="兼容模式" prop="compatible" desc="请选择兼容模式，如选择取代物流配送，则前台仅允许到店自提">
						<RadioGroup v-model="formData.compatible">
							<Radio :label="1">兼容物流配送</Radio>
							<Radio :label="2">取代物流配送</Radio>
						</RadioGroup>
					</FormDescItem>
					<FormDescItem label="自动备货" desc="如选择关闭，则系统不会自动完成备货，无需后台确认已备货">
						<RadioGroup v-model="formData.auto_stock">
							<Radio :label="1">开启</Radio>
							<Radio :label="0">关闭</Radio>
						</RadioGroup>
					</FormDescItem>
					<FormDescItem label="备货方式" desc="设置系统备货方式，当满足条件，系统自动提示可提货">
						<RadioGroup v-model="formData.stock_type">
							<Radio label="minute">按分备货</Radio>
							<Radio label="day">按天备货</Radio>
							<Radio label="prescription">按时效备货</Radio>
						</RadioGroup>
					</FormDescItem>
					<div class="form-switch-box" v-if="formData.stock_type == 'minute'">
						<FormItem label="下单多少分钟后可提货">
							<InputNumber v-model="formData.stock_config_minute" :min="0" :step="1" :precision="0" style="width: 100%;"></InputNumber>
						</FormItem>
					</div>
					<div class="form-switch-box" v-if="formData.stock_type == 'day'">
						<FormItem label="下单多少天后可提货">
							<InputNumber v-model="formData.stock_config_day" :min="0" :step="1" :precision="0" style="width: 100%;"></InputNumber>
						</FormItem>
					</div>
					<div class="form-switch-box" v-if="formData.stock_type == 'prescription'">
						<FormItem label="下单时间早于以下时间">
							<TimePicker v-model="formData.stock_config_pre_time" type="time" style="width: 100%;"></TimePicker>
						</FormItem>
						<FormItem label="下单多少天后可提货">
							<InputNumber v-model="formData.stock_config_pre_day" :min="0" :step="1" :precision="0" style="width: 100%;"></InputNumber>
						</FormItem>
						<FormItem label="晚于以上时间下单提货周期">
							<InputNumber v-model="formData.stock_config_pre_after_day" :min="0" :step="1" :precision="0" style="width: 100%;"></InputNumber>
						</FormItem>
					</div>
					<FormDescItem label="备货有效期" desc="如选择开启，完成备货设置时间后，将不能提货">
						<RadioGroup v-model="formData.stock_expired_status">
							<Radio :label="1">开启</Radio>
							<Radio :label="0">关闭</Radio>
						</RadioGroup>
					</FormDescItem>
					<FormDescItem label="备货完成后多少天禁止提货" desc="请设置备货结束后多少天将不能再提货">
						<InputNumber v-model="formData.stock_expired_day" :min="0" :step="1" :precision="0"></InputNumber>
					</FormDescItem>
					<FormDescItem label="过期处理方式" prop="expired_type" desc="提货时间过期后，订单将自动完成，请选择是否退款">
						<RadioGroup v-model="formData.expired_type">
							<Radio :label="2">订单完成自动退款</Radio>
							<Radio :label="1">订单完成不退款</Radio>
						</RadioGroup>
					</FormDescItem>
					<div>
						<Button type="primary" @click="handleSubmit" :disabled="submiting">{{submiting ? '提交中...' : '保存设置'}}</Button>
					</div>
				</Form>
			</TabPane>
		</Tabs>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
import SelectImage from '@/components/SelectImage.vue';
import ImageCells from '@/components/ImageCell/cells.vue';
import MaterialLibrary from '@/components/MaterialLibrary.vue';
import LoadingMask from '@/components/LoadingMask.vue';
export default {
	name: "appPickSiteSet",
	components: {
		FormDescItem,
		SelectImage,
		ImageCells,
		MaterialLibrary,
		LoadingMask
	},
	data() {
		return {
			submiting: false,
			formData: {
				store_name: '',
				status: 1,
				compatible: 1,
				expired_type: 2,
				auto_stock: 1,
				stock_expired_status: 1,
				stock_expired_day: 1,
				stock_type: 'minute',
				stock_config_minute: 1,
				stock_config_day: 1,
				stock_config_pre_time: '',
				stock_config_pre_day: null,
				stock_config_pre_after_day: null
			},
			formRules: {
				//表单验证规则
				store_name: [
					{ required: true, message: "请输入自定义自提点名称", trigger: "blur" },
					{ max: 4, message: "最长可输入四个字符", trigger: "blur" }
				]
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			let numberKey = ['status', 'compatible', 'expired_type', 'auto_stock', 'stock_expired_status', 'stock_expired_day']
			// 获取配置信息
			Util.ajax.post(this.API['API_APP_STORE_SET_LISTS'], {}).then(res => {
				res.forEach(item => {
					if(this.formData[item.key] != undefined) {
						if(numberKey.indexOf(item.key) >= 0) {
							this.formData[item.key] = Number(item.value) || null;
						}else if(item.key == 'stock_type_config') {
							let config = JSON.parse(item.value);
							/*if(this.formData.stock_type)
							stock_config_day: 1,
							stock_config_pre_time: '',
							stock_config_pre_day: null,
							stock_config_pre_after_day: null
							// this.formData.stock_type_config = JSON.parse(item.value);*/
						}else{
							this.formData[item.key] = item.value;
						}
					}
				})
			}).catch(() => {
				
			})
		},
		handleSubmit() {
			if(this.submiting) return false;
			this.$refs.form.validate((valid) => {
				if(valid) {
					let form = this.formData;
					let params = {
						store_name: form.store_name,
						status: form.status,
						compatible: form.compatible,
						expired_type: form.expired_type,
						auto_stock: form.auto_stock,
						stock_expired_status: form.stock_expired_status,
						stock_expired_day: form.stock_expired_day,
						stock_type: form.stock_type,
						stock_type_config: {}
					}
					
					if(form.stock_type == 'minute') {
						params.stock_type_config.start_time = form.stock_config_minute;
					}else if(form.stock_type == 'day') {
						params.stock_type_config.start_time = form.stock_config_day;
					}else if(form.stock_type == 'prescription') {
						params.stock_type_config.date_time = form.stock_config_pre_time;
						params.stock_type_config.start_time = form.stock_config_pre_day;
						params.stock_type_config.end_time = form.stock_config_pre_after_day;
					}
					
					this.submiting = true;
					Util.ajax.post(this.API['API_APP_STORE_SET_SAVE'], params).then((res) => {
						this.$Message.success('保存成功');
					}).catch(() => {
						this.submiting = false;
					})
				}
			})
		}
	}
};
</script>

<style>
.form-switch-box {
	width: 300px;
	margin-top: -15px;
	margin-bottom: 25px;
	padding: 20px 20px 0;
	border: 1px dashed #e0e1e4;
	border-radius: 5px;
	background-color: #fafafa;
}
</style>